import React, { Children, useEffect, useState } from 'react';
import { HeaderProps } from './header';
import classNames from 'classnames';
import { AsideProps } from './aside';
import { MainProps } from './main';
import { FooterProps } from './footer';

interface ContainerProps {
    children: React.ReactNode
    className?: string
    style?: React.CSSProperties
}

const Container: React.FC<ContainerProps> = props => {

    const { children, style, className } = props;

    const [flexDirection, setFlexDirection] = useState('nowrap')

    const styles = {
        ...{ '--flex-direction--': flexDirection },
        ...style
    }

    const classes = classNames(className, 'yulang-container-container')

    useEffect(() => {
        Children.forEach(children, (child => {
            const childElement = child as React.FunctionComponentElement<HeaderProps | AsideProps | MainProps | FooterProps>
            if (childElement.type.displayName && ['Header', 'Footer'].includes(childElement.type.displayName)) {
                setFlexDirection("wrap");
            }
        }))
    })

    return <div className={classes} style={styles}>{children}</div>
}

export default Container;

